<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fill Excel Template</title>
  </head>
  <body>
    <div>示例一：本地模板文件解析&nbsp;<input type="file" /></div>
    <div>
      示例二：URL模板文件解析
      <button type="button">盖公章&解析图片</button>
    </div>
    <!-- 引入 ExcelJS -->
    <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
    <script src="../dist/index.umd.js"></script>
    <script>
      const { renderXlsxTemplate, placeholderRange, fetchUrlFile } = ExceljsXlsxTemplate
      const xlsxFile = new URL("./assets/template.xlsx", location.href).toString()
      const officialsealFile = new URL("./assets/officialseal.png", location.href).toString()
      const imageUrl = "https://s2.loli.net/2025/03/07/ELZY594enrJwF7G.png"
      const data = [
        {
          name: "John",
          items: [
            { no: "No.1", name: "JavaScript" },
            { no: "No.2", name: "CSS" },
            { no: "No.3", name: "HTML" },
            { no: "No.4", name: "Node.js" },
            { no: "No.5", name: "Three.js" },
            { no: "No.6", name: "Vue" },
            { no: "No.7", name: "React" },
            { no: "No.8", name: "Angular" },
            { no: "No.9", name: "UniApp" },
          ],
          projects: [
            { name: "Project 1", description: "Description 1", image: imageUrl },
            { name: "Project 2", description: "Description 2", image: imageUrl },
            { name: "Project 3", description: "Description 3", image: imageUrl },
          ],
        },
        {
          invoice_number: "54548",
          last_name: "John",
          first_name: "Doe",
          phone: "00874****",
          invoice_date: "15/05/2008",
          items: [
            {
              name: "description",
              unit_price: 300,
            },
            {
              name: "HTML",
              unit_price: 400,
            },
          ],
          subtotal: 700,
          tax: 140,
          grand_total: 840,
        },
      ]

      // 示例一
      const fileInput = document.querySelector("input[type=file]")
      fileInput.addEventListener("change", async (event) => {
        const file = event.target.files[0]
        if (!file) return

        try {
          renderXlsxTemplate(file, data, `${Date.now()}.xlsx`)
        } catch (error) {
          console.error("Error processing Excel file:", error)
        }
      })

      // 示例二
      const button = document.querySelector("button")
      button.addEventListener("click", () => {
        try {
          renderXlsxTemplate(xlsxFile, data, `${Date.now()}.xlsx`, {
            parseImage: true,
            async beforeSave(workbook) {
              // 获取工作表
              const worksheet = workbook.getWorksheet("新报关单")
              if (worksheet) {
                // 获取印章占位符位置信息
                const range = placeholderRange(worksheet, "{{#officialseal}}")
                if (range) {
                  // 加载图片印章
                  const officialsealArrayBuffer = await fetchUrlFile(officialsealFile)
                  // 将图片添加到工作簿
                  const imageId = workbook.addImage({
                    buffer: officialsealArrayBuffer,
                    extension: "png",
                  })
                  // 插入图片到表格中
                  worksheet.addImage(imageId, {
                    tl: { col: range.start.col, row: range.start.row - 4 },
                    ext: { width: 200, height: 200 },
                  })
                }
              }
            },
          })
        } catch (error) {
          console.error("Error processing Excel file:", error)
        }
      })
    </script>
  </body>
</html>
